<template>
<div>
  <van-nav-bar
      style="background-color: #f2f2f2;color: #666"
      title="购物车"
      right-text="编辑"
      @click-right="handleEdit"
  />
  <van-notice-bar
      style="background-color: white;color: #333333"
      scrollable
      left-icon="volume-o"
      text="温馨提示:产品是否购买成功,最终下单为准,请尽快结算。"
  />

  <ol>
    <van-checkbox-group v-model="result" ref="checkboxGroup" @change="handleChange()">
    <li style=" margin: 40px 0;" v-for="(item,index) in shopcard" :key="index">
      <van-row type="flex" justify="space-between">
        <van-col span="2">
          <van-checkbox :name="index" style="margin: 35px 0 0 10px"/>
        </van-col>
        <van-col span="22">
          <van-swipe-cell>
            <van-card
                style="padding: 0;font-size: 15px;"
                :title="item.title"
                class="goods-card"
                :thumb="item.thumb"
            >
              <template #price >
                <p style="margin: 20px 0 4px 0;font-size: 16px; color: #ff5934; font-weight: bold">售价：￥{{ item.price }}</p>
              </template>

              <template #origin-price >
                <p>￥{{ item.price }}</p>
              </template>
              <template #bottom style="">
                <van-stepper v-model="item.num" integer />
              </template>

            </van-card>



            <template #right >
              <van-button square text="删除" type="danger" class="delete-button" slot="right" @click="close(index)"   />
              <van-button square text="移入收藏" type="primary" class="delete-button" />
            </template>
          </van-swipe-cell>
        </van-col>
      </van-row>
    </li>
    </van-checkbox-group>
  </ol>


  <div  v-show="isShow"  >
    <van-submit-bar :price="pay"   button-text="结sdfsdfs算" button-color="#ff5934" @submit="onSubmit" style="bottom:50px; position: fixed">
      <van-button type="primary" size="small" @click="checkAll">全选</van-button>
      <van-button type="info" size="small" @click="toggleAll" style="margin-left: 10px">反选</van-button>
    </van-submit-bar>
  </div>
  <div v-show="isShow2" style="margin-bottom: 50px; position: relative">
    <van-submit-bar   :price="pay"   button-text="结算sdfsdf" button-color="#ff5934" @submit="onSubmit">
      <van-button type="primary" size="small" @click="checkAll">全选</van-button>
      <van-button type="info" size="small" @click="toggleAll" style="margin-left: 10px">反选</van-button>
    </van-submit-bar>
  </div>

</div>
</template>

<script>

export default {
  components:{

  },
  data(){
    return{
      shopcard:[{
        sku:1,
        title:'Redmi Note 11T Pro',
        price:1477,
        thumb:'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205221513_5a46ea12800c7d02b9a1c9a050e2a66e.png',
        num:1
      },
        {
          sku:2,
          title:'Redmi Note 22T Pro',
          price:3477,
          thumb:'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205221513_5a46ea12800c7d02b9a1c9a050e2a66e.png',
          num:1
        },
        {
          sku:3,
          title:'Redmi Note 33T Pro',
          price:1477,
          thumb:'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205221513_5a46ea12800c7d02b9a1c9a050e2a66e.png',
          num:1
        },
      ],
      count: 0,
      isLoading: false,
      isShow:true,
      result:[],

    }
  },
  // 计算属性
  computed:{
    pay:function (){
        let num = 0;
      for (let i = 0; i < this.result.length; i++) {
        num += this.shopcard[i].price * this.shopcard[i].num;
      }
       return num*100;
    },
    isShow2:function (){
      return !this.isShow
    }
  },

  methods: {
    close(index) {
      this.$toast.success({
        message: '删除成功',
        duration: 1000,
        forbidClick: true,
      });
      setTimeout(() => {
        this.shopcard.splice(index, 1);//从列表删除该数据
      }, 1000)
    },
    onSubmit() {

    },
    handleEdit() {
      this.isShow = !this.isShow

    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
    handleChange(){
      console.log(this.result)
    }
  }

}
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color:white;
}


.delete-button {
  height: 100%;
}
.table{

}
</style>